<template>
  <div id="earlyStageAchievementOpinion">
    <el-tabs v-model="flag" @tab-click="handleClick">
      <el-tab-pane label="配号资料要件审查" name="1"></el-tab-pane>
      <el-tab-pane label="市级外业抽查复核" name="2"></el-tab-pane>
      <el-tab-pane label="审查流程" name="3"></el-tab-pane>
    </el-tabs>
    <div class="MainBox1" v-show="flag=='3'">
      <optionList :optionListCode="optionListCode" />
    </div>
    <div class="MainBox" v-show="flag=='1'">
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">项目基本信息</span>
        </div>
        <div class="boxItem_content" style="padding-top:25px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">项目名称：</p>
                <div class="pContent">{{basicInfo.projectName}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">区县合格证编号：</p>
                <div class="pContent">{{qxNumber}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">减少建设用地：</p>
                <div class="pContent">{{basicInfo.yjjsj}}公顷</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">新增农用地：</p>
                <div class="pContent">{{basicInfo.yjzjn}}公顷</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">新增耕地：</p>
                <div class="pContent">{{basicInfo.yjzjg}}公顷</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">项目类型：</p>
                <div class="pContent">{{basicInfo.projectType}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">备案通知书文号：</p>
                <div class="pContent">{{qxSymbol}}</div>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="boxItem_content_row">
                <p class="pTitle">项目基本情况：</p>
                <div class="pContent">{{basicInfo.projectBasicInfo}}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">市中心审查意见</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <div class="options">
            <p>经办人审查意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                readonly
                v-model="jingbanrenOpinion"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>签字：</p>
                  <div class="options_row_img">
                    <img :src="$https+jingbanren" alt />
                    <!-- <el-input :disabled="true" v-model="jingbanren" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>日期：</p>
                  <el-date-picker
                    v-model="jingbanrenDate"
                    type="date"
                    readonly
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <!-- <el-col :span="8">
                <div class="options_row_title">
                  <p>状态：</p>
                  <el-select v-model="jingbanrenStatus" disabled placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>-->
            </el-row>
          </div>
          <div class="options">
            <p>处室负责人审查意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                readonly
                v-model="chushirenOpinion"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>签字：</p>
                  <div class="options_row_img">
                    <img :src="$https+chushiren" alt />
                    <!-- <el-input :disabled="true" v-model="chushiren" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>日期：</p>
                  <el-date-picker
                    v-model="chushirenDate"
                    type="date"
                    readonly
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <!-- <el-col :span="8">
                <div class="options_row_title">
                  <p>状态：</p>
                  <el-select v-model="chushirenStatus" disabled placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>-->
            </el-row>
          </div>
          <div class="options">
            <p>中心分管领导审查意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                :readonly="isReadonly"
                v-model="fenguanLeaderOpinion"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <el-row class="options_row">
              <el-col :span="8">
                <div class="options_row_title">
                  <p>签字：</p>
                  <div class="options_row_img">
                    <img :src="$https+fenguanLeader" alt />
                    <!-- <el-input :disabled="true" v-model="fenguanLeader" suffix placeholder="请输入内容"></el-input> -->
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="options_row_title">
                  <p>日期：</p>
                  <el-date-picker
                    v-model="fenguanLeaderDate"
                    type="date"
                    :readonly="isReadonly"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
              <el-col :span="8" v-if="!isReadonly">
                <div class="options_row_title">
                  <p>状态：</p>
                  <el-select v-model="fenguanLeaderStatus" placeholder="请选择">
                    <el-option label="同意" value="APPROVED"></el-option>
                    <el-option label="拒绝" value="REJECTED"></el-option>
                  </el-select>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="btn" v-if="isSzxywcsxzzBtn">
            <!-- <el-button type="primary" v-loading="isLoading" @click="btnTijiao">提交</el-button> -->
            <el-button type="primary" :loading="isLoading" @click="btnTijiao">提交</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="MainBox" v-show="flag=='2'">
      <div class="boxItem boxItem1">
        <div class="boxItem_title">
          <span class="tit">外业抽查基本情况</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">片块总数：</p>
                <div class="pContent">{{wyInfo.reclaimCount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">抽查复核比例：</p>
                <div class="pContent">{{wyInfo.extractiveRatio}}%</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">抽取片块数：</p>
                <div class="pContent">{{wyInfo.extractiveLandCount}}</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">抽取时间：</p>
                <div class="pContent">{{wyInfo.extractiveDate}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">抽取地点：</p>
                <div class="pContent">{{wyInfo.extractiveSite}}</div>
              </div>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>

          <div class="box_search displayFlex">
            <div class="displayFlex">
              <p>权利人姓名：</p>
              <div class="margin_rignt">
                <el-input v-model="searchInfo.qlr" clearable placeholder="请输入"></el-input>
              </div>
            </div>
            <div class="displayFlex margin_rignt">
              <p>复垦片块：</p>
              <div class="margin_rignt">
                <el-select v-model="searchInfo.landId" clearable filterable placeholder="请选择">
                  <el-option
                    v-for="item in wyData"
                    :key="item.landId"
                    :label="item.landName"
                    :value="item.landId"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="displayFlex">
              <p>开始时间：</p>
              <div class="margin_rignt">
                <el-date-picker
                  v-model="searchInfo.startTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="displayFlex margin_rignt">
              <p>截止时间：</p>
              <div class="margin_rignt">
                <el-date-picker
                  v-model="searchInfo.endTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  placeholder="选择日期"
                ></el-date-picker>
              </div>
            </div>
            <el-button type="primary" @click="getWyInfo">查询</el-button>
          </div>
          <el-table
            :data="wyData"
            border
            :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
          >
            <el-table-column type="index" show-overflow-tooltip label="序号" align="center"></el-table-column>
            <el-table-column prop="applicantName" label="权利人" align="center"></el-table-column>
            <el-table-column prop="num" label="身份证号" align="center"></el-table-column>
            <el-table-column prop="landName" label="复核地块" align="center"></el-table-column>
            <el-table-column prop="place" label="位置" align="center"></el-table-column>
            <el-table-column prop="time" label="复核时间" align="center"></el-table-column>
            <el-table-column label="抽查复核结论" align="center">
              <template
                slot-scope="scope"
              >{{scope.row.yesOrNo=='YES'?'通过':(scope.row.yesOrNo=='NO'?'未通过':'')}}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="btnById(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageStyle">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="searchInfo.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="searchInfo.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">外业抽查复核意见</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <div class="options">
            <p>市级抽查复核意见</p>
            <div class="boxItem_content_row_item_noFlex_textarea">
              <el-input
                type="textarea"
                :rows="3"
                v-model="searchInfo.sjccfhOpinion"
                resize="none"
                readonly
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>

          <div class="btn" v-if="isSzxywcsxzzBtn">
            <el-button type="primary" :loading="wyBtnLoading" @click="btnWyYj">提交</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" title="合格证备案配号资料要件审查意见表" :visible.sync="tableDialog" width="50%">
      <div style="padding:20px">
        <iframe
          frameborder="0"
          name="showHere"
          style="width:100%;min-height:500px;"
          scrolling="auto"
          :src="$https+dataInfo.filePath"
        ></iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="tableDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOK">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryProjectBasicInfo,
  saveCenterLeaderOpinion,
  queryYaojianOpinion,
  queryWyccTableInfo,
  saveFieldRandomReviewOpinion,
  queryWyBasceInfo
} from "@/api/shijiChouchaFuhe";
import { getYjTable } from "@/api/hegezhengPeihao";
import { getTime } from "@/api/getTime";
import { findById } from "@/api/common";
import optionList from "@/components/optionList";
export default {
  components: {
    optionList
  },
  data() {
    return {
      optionListCode: "QualifiedCertificateApplicationSecondAudit",
      basicInfo: "", //项目基本信息
      qxNumber: "", //编号
      qxSymbol: "", //文号

      jingbanrenOpinion: "", //经办人意见
      jingbanren: "", //经办人
      jingbanrenDate: "", //经办日期，
      jingbanrenStatus: "", //经办状态

      chushirenOpinion: "", //处室人意见
      chushiren: "", //处室人
      chushirenDate: "", //处室日期，
      chushirenStatus: "", //处室状态

      fenguanLeaderOpinion: "", //中心分管领导意见
      fenguanLeader: "", //中心分管领导
      fenguanLeaderDate: "", //中心分管领导日期，
      fenguanLeaderStatus: "", //中心分管领导状态
      isLoading: false,

      tableDialog: false,
      dataInfo: "",
      isSzxywcsxzzBtn: false,
      isReadonly: false,
      userIcon: "", //用户签名照
      flag: "1",

      searchInfo: {
        page: 1,
        size: 5,
        qlr: "", //权利人
        landId: "", //片块id
        startTime: "", //开始时间
        endTime: "", //截止时间
        sjccfhOpinion: "" //实际抽查复核意见
      },

      wyData: [], //外业数据
      total: 0,
      wyBtnLoading: false,
      wyInfo: "" //外业抽查基本信息
    };
  },
  mounted() {
    this.getData();
    this.fenguanLeaderDate = getTime();
    this.getYaojianOpinion();
    if (
      localStorage.getItem("router") ==
      "QUALIFIED_CERTIFICATE_APPLICATION_SECOND_AUDIT_THIRD_OPINION"
    ) {
      this.isSzxywcsxzzBtn = true;
      this.isReadonly = false;
      if (localStorage.getItem("menusName") == "ROLE_SZXFGFZR") {
        this.isReadonly = false;
        this.isSzxywcsxzzBtn = true;
      } else {
        this.isReadonly = true;
        this.isSzxywcsxzzBtn = false;
      }
    } else {
      this.isReadonly = true;
      this.isSzxywcsxzzBtn = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.isReadonly = true;
      this.isSzxywcsxzzBtn = false;
    }
    this.getYaojianOpinion();
    this.getWyInfo();
    this.getWyBasceInfo();
  },
  methods: {
    btnOK() {
      this.$confirm("当前流程办理完成", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.$router.push({
            path: "/xmss/ywdeal"
          });
        })
        .catch(() => {});
    },
    getWyBasceInfo() {
      //获取外业抽查基本信息
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      queryWyBasceInfo(obj).then(res => {
        if (res.data) {
          this.wyInfo = res.data;
        }
      });
    },
    //跳转详情
    btnById(row) {
      this.$router.push({
        path: "/hegezhengPeihao/supervisionInformation/detail",
        query: {
          id: row.landId,
          vcr: row.vcr ? row.vcr : "",
          photo: row.photo ? row.photo : "",
          landName: row.landName,
          time: row.time
        }
      });
    },
    btnWyYj() {
      //市级抽查复核意见
      let obj = {
        fieldRandomReviewOpinion: this.searchInfo.sjccfhOpinion,
        projectId: localStorage.getItem("projectId")
      };
      this.wyBtnLoading = true;
      saveFieldRandomReviewOpinion(obj)
        .then(res => {
          this.wyBtnLoading = false;
          if (res.code == 1000) {
            this.$message({
              message: "提交成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.wyBtnLoading = false;
        });
    },
    getWyInfo() {
      //外业信息
      let obj = {
        page: this.searchInfo.page,
        size: this.searchInfo.size,
        projectId: localStorage.getItem("projectId"),
        landId: this.searchInfo.landId,
        applicantName: this.searchInfo.qlr,
        startTime: this.searchInfo.startTime,
        finishTime: this.searchInfo.endTime
      };
      queryWyccTableInfo(obj).then(res => {
        console.log(res, "re");
        this.wyData = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchInfo.size = val;
      this.getWyInfo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchInfo.page = val;
      this.getWyInfo();
    },
    //获取用户信息
    userInfo() {
      var data = {
        id: localStorage.getItem("userId")
      };
      findById(data).then(res => {
        console.log(res, "用户信息");
        this.userIcon = res.data.signedPhoto;
      });
    },
    getYaojianOpinion() {
      //要件意见
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      queryYaojianOpinion(obj).then(res => {
        this.jingbanrenOpinion = res.data.agentOpinion;
        this.jingbanren = res.data.agentDto.signedPhoto;
        this.jingbanrenDate = res.data.agentAuditDate;
        this.jingbanrenStatus = res.data.agentAuditResult;

        this.chushirenOpinion = res.data.officePeopleOpinion;
        this.chushiren = res.data.officePeople.signedPhoto;
        this.chushirenDate = res.data.officePeopleAuditDate;
        this.chushirenStatus = res.data.officePeopleAuditResult;

        this.fenguanLeaderOpinion = res.data.centerLeaderOpinion;
        this.fenguanLeader =
          res.data.centerLeader != null
            ? res.data.centerLeader.signedPhoto
            : this.$store.state.user.userInfo.signedPhoto;
        this.fenguanLeaderDate =
          res.data.centerLeaderAuditDate != null
            ? res.data.centerLeaderAuditDate
            : getTime();
        this.fenguanLeaderStatus = res.data.centerLeaderAuditResult;

        this.searchInfo.sjccfhOpinion = res.data.fieldRandomReviewOpinion;
      });
    },
    btnTijiao() {
      this.$f;
      let obj = {
        projectId: localStorage.getItem("projectId"),
        opinion: this.fenguanLeaderOpinion,
        auditorId: localStorage.getItem("userId"),
        auditDate: this.fenguanLeaderDate,
        auditResult: this.fenguanLeaderStatus
      };
      this.isLoading = true;
      saveCenterLeaderOpinion(obj)
        .then(res => {
          this.isLoading = false;
          if (res.code == 1000) {
            this.$confirm(
              "当前流程办理完成，是否查看要件审查意见表？",
              "提示",
              {
                confirmButtonText: "查看",
                cancelButtonText: "返回",
                closeOnClickModal: false
              }
            )
              .then(() => {
                this.$router.push({
                  path: "/hegezhengPeihao/fileData/yaojianTable"
                });
              })
              .catch(() => {
                this.$router.push({
                  path: "/xmss/ywdeal"
                });
              });
            this.getYaojianOpinion();
            this.$refs.optionList.getProgress();
            // let objdata = {
            //   projectId: localStorage.getItem("projectId")
            // };
            // getYjTable(objdata).then(res => {
            //   if (res.code == 1000) {
            //     this.dataInfo = res.data;
            //     this.tableDialog = true;
            //   }
            // });
          }
        })
        .catch(error => {
          this.isLoading = false;
        });
    },
    getData() {
      var data = {
        projectId: localStorage.getItem("projectId")
      };
      queryProjectBasicInfo(data).then(res => {
        this.basicInfo = res.data;
        this.qxNumber =
          res.data.districtName +
          "【" +
          res.data.year +
          "】" +
          " " +
          res.data.number +
          "号";
        this.qxSymbol =
          "渝国土建复备" +
          "【" +
          res.data.year +
          "】" +
          " " +
          res.data.symbol +
          "号";
      });
    },
    //切换选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  padding: 30px;
}
.MainBox {
  margin-top: 20px;
}
.btn {
  padding: 30px 20px 10px 20px;
}

#earlyStageAchievementOpinion {
  padding: 30px;
  box-sizing: border-box;
}
#earlyStageAchievementOpinion .boxItem {
  width: 100%;
  background-color: #fff;
}
#earlyStageAchievementOpinion .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#earlyStageAchievementOpinion .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#earlyStageAchievementOpinion .boxItem_content_row {
  display: flex;
  align-items: center;
}
.options {
  font-size: 13px;
  font-weight: bold;
  color: #444;
}
.options_row {
  margin-top: 15px;
  display: flex;
  align-items: center;
}
.options_row_title {
  display: flex;
  align-items: center;
}
.options_row_img img {
  width: 105px;
  height: 59px;
  margin-left: 20px;
}

.boxItem_content_row_item_noFlex_textarea {
  width: 90%;
}
.pTitle,
.options_row_title p,
.options p {
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
.pContent {
  font-size: 14px;
  color: #606266;
}
.box_search {
  margin: 20px 0;
  color: #606266;
  font-size: 14px;
}
.displayFlex {
  display: flex;
  align-items: center;
  flex-warp: warp; /*CSS3样式，支持webkit，ms*/
  -ms-flex-wrap: wrap; /*IE9以及一下不支持*/
  -webkit-flex-wrap: wrap;
}
.margin_rignt {
  margin-right: 20px;
}
.pageStyle {
  text-align: center;
  margin: 20px;
}
</style>